/* eslint no-unused-vars:0 */
import React from 'react';
import { Form, Input, Icon, Select, Button, message } from 'antd';
import './addForm.css';

const Option = Select.Option;

class addForm extends React.Component {
    state = {};

    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((err, values) => {
            this.$post('user/add', values)
                .then((res) => {
                    if (res.msg === 'success') message.success('添加成功');
                    else message.error('用户已存在');
                })
                .catch((err) => {
                    console.log(err);
                });
        });
    };

    render() {
        const { getFieldDecorator } = this.props.form;

        const formItemLayout = {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 8 }
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 16 }
            }
        };

        const tailFormItemLayout = {
            wrapperCol: {
                xs: {
                    span: 24,
                    offset: 0
                },
                sm: {
                    span: 16,
                    offset: 8
                }
            }
        };

        return (
            <div id="add">
                <Form {...formItemLayout} onSubmit={this.handleSubmit}>
                    <Form.Item label="用户名：">
                        {getFieldDecorator('username', {
                            rules: [
                                {
                                    required: true,
                                    message: '用户名不能为空'
                                },
                                {
                                    min: 5,
                                    max: 10,
                                    message: '长度不在范围内'
                                },
                                {
                                    pattern: new RegExp('^\\w+$', 'g'),
                                    message: '用户名必须是数字或者字母'
                                }
                            ]
                        })(
                            <Input
                                prefix={
                                    <Icon
                                        type="user"
                                        style={{ color: 'rgba(0,0,0,.25)' }}
                                    />
                                }
                            />
                        )}
                    </Form.Item>
                    <Form.Item label="性别：">
                        {getFieldDecorator('sex')(
                            <Select style={{ width: 100 }}>
                                <Option value="0">女</Option>
                                <Option value="1">男</Option>
                            </Select>
                        )}
                    </Form.Item>
                    <Form.Item label="类型：">
                        {getFieldDecorator('roleId')(
                            <Select style={{ width: 100 }}>
                                <Option value="0">用户</Option>
                                {localStorage.getItem('userType') === '2' ? (
                                    <Option value="1">管理员</Option>
                                ) : (
                                    ''
                                )}
                            </Select>
                        )}
                    </Form.Item>
                    {localStorage.getItem('userType') === '2' ? (
                        <Form.Item label="学校：">
                            {getFieldDecorator('college', {
                                reles: [
                                    {
                                        required: true,
                                        message: '学校不能为空'
                                    }
                                ]
                            })(
                                <Input
                                    prefix={
                                        <Icon
                                            type="home"
                                            style={{ color: 'rgba(0,0,0,.25)' }}
                                        />
                                    }
                                />
                            )}
                        </Form.Item>
                    ) : (
                        ''
                    )}
                    <Form.Item label="联系方式：">
                        {getFieldDecorator('contact', {
                            rules: [
                                {
                                    min: 8,
                                    message: '请输入正确的联系方式'
                                },
                                {
                                    pattern: new RegExp(/^[1-9]\d*$/, 'g'),
                                    message: '请输入正确的联系方式'
                                }
                            ]
                        })(
                            <Input
                                prefix={
                                    <Icon
                                        type="phone"
                                        style={{ color: 'rgba(0,0,0,.25)' }}
                                    />
                                }
                            />
                        )}
                    </Form.Item>
                    <Form.Item label="E-mail：">
                        {getFieldDecorator('mail', {
                            rules: [
                                {
                                    type: 'email',
                                    message: '请输入正确的邮箱地址！'
                                }
                            ]
                        })(
                            <Input
                                prefix={
                                    <Icon
                                        type="mail"
                                        style={{ color: 'rgba(0,0,0,.25)' }}
                                    />
                                }
                            />
                        )}
                    </Form.Item>
                    <Form.Item {...tailFormItemLayout}>
                        <Button type="primary" htmlType="submit">
                            确定
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        );
    }
}

const AddForm = Form.create()(addForm);

export default AddForm;
